<template>
    <div class="relevant-info">
        <div class="title">相关资料</div>
        <div class="list">
            <div
                v-for="(item, index) in list"
                :key="index"
                class="item row"
                @click="showPopupFrame(item)"
            >
                <div class="bot"></div>
                <span class="text-overflow-ellipsis-2">{{ item.text }}</span>
            </div>
        </div>

        <PopupFrame ref="popupFrame" />
    </div>
</template>

<script>
import PopupFrame from "@/components/common/popupFrame/index";
export default {
    components: {
        PopupFrame
    },
    props: {
        list: Array
    },
    data() {
        return {};
    },

    methods: {
        toInfoLink(item) {
            window.location.href = item.url;
        },

        showPopupFrame(item) {
            const popupFrame = this.$refs.popupFrame;
            popupFrame.showPopup({
                src: item.url
            });
        }
    }
};
</script>


<style lang="less" scoped>
.relevant-info {
    background: #fff;
    padding: 0 30px 60px 30px;
    .title {
        font-weight: 600;
        font-size: 34px;
        padding: 30px 0;
    }

    .list {
        padding: 0 0 0 10px;
        .item {
            padding-bottom: 20px;
            align-items: center;
            .bot {
                display: block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                color: #457bb1;
                margin-right: 15px;
            }
            span {
                color: #457bb1;
            }
        }
    }
}
</style>